<template>
    <div>
        <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
          <el-menu-item-group title="分组一">
            <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
            <el-menu-item index="2" default-active ><i class="el-icon-message"></i>导航二</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组二">
            <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
            <el-menu-item index="4"><i class="el-icon-message" v-on:click="loginBtn()" ></i>导航四</el-menu-item>
          </el-menu-item-group>
        </el-menu>


        <ul id="example-1">
            <li v-for="item in menuData">
                {{ item }}
            </li>
        </ul>
    </div>

</template>

<script>

    export default {

        data: function () {
            return{
                menuData: []
            }
        },

        mounted: {

            getMenus:function () {

                axios.get('/api/jsondata')
                    .then(function (response) {


                        var vm = this
                        vm.menuData = 'Thinking...'

                        console.log(response.data);

//                    this.menuData = response.data;
                        vm.menuData = response.data;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });


            }
        },

        mounted:function(){
            this.getMenus()
        }


    }


</script>
